<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
        /* 将默认的列表符号去掉 */
        padding: 0;
        /* 将默认的内边距去掉 */
        margin: 0;
        /* 将默认的外边距去掉 */
    }

    body {
        font: 12px verdana, arial, sans-serif;
    }

    #footer-menu li {
        float: left;
    }

    #footer-menu li a {
        display: block;
        /* 将链接设为块级元素 */
        width: 150px;
        /* 设置宽度 */
        height: 30px;
        /* 设置高度 */
        line-height: 30px;
        /* 设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
        text-align: center;
        /* 居中对齐文字 */
        /* 设置内边距 */
        background: #3A4953;
        /* 设置背景色 */
        color: #fff;
        /* 设置文字颜色 */
        text-decoration: none;
        /* 去掉下划线 */
        border-right: 1px solid #000;
        /* 在左侧加上分隔线 */
    }

    #footer-menu li a:hover {
        background: #146C9C;
        /* 变换背景色 */
        color: #fff;
        /* 变换文字颜色 */
    }

    #footer-menu li a.last {
        border-right: 0;
        /* 去掉左侧边框 */
    }
</style>

<body>
    <ul id="footer-menu">
        <li>
            <a href="http://www.baidu.com">Baidu.Com</a>
        </li>
        <li>
            <a href="http://www.Code52.Net">Code52.Net</a>
        </li>
        <li>
            <a href="http://www.yahoo.com">Yahoo.Com</a>
        </li>
        <li>
            <a href="http://www.google.com" class="last">Google.Com</a>
        </li>
    </ul>
</body>

</html>